<template>
  <div
    class="fullScreenBox"
    :style="{
      'background-image': `url(${playMusic.picUrl || playMusic.al.picUrl})`,
    }"
  >
    <div class="volume">
      <el-slider
        v-model="locaVolume"
        vertical
        height="200px"
        @change="changeVolume"
        v-if="isShowVolume"
      >
      </el-slider>
    </div>

    <div class="Inner">
      <div class="fullScreenHeader">
        <div class="x" @click.stop="showPlay">
          <van-icon name="arrow-down" />
        </div>
        <div class="songName">{{ playMusic.name }}</div>
        <div class="forward"><van-icon name="share" /></div>
      </div>

      <div class="boxBody">
        <ul class="bodyInner" ref="lyricLsit">
          <li
            v-for="(item, index) in lyricList"
            :key="index"
            :class="{
              active: item.time <= currentTime && currentTime < item.pre,
            }"
          >
            {{ item.lyric }}
          </li>
          <!-- <li
            v-for="(item, index) in lyricList"
            :key="item.time"
            :style="{color:lyricIndex===1?'biue':'red'}"
            :data-index='index'
            ref="lyric"
          >
            {{ item.lyric }}
          </li> -->
        </ul>
      </div>

      <transition name="updown">
        <audioPlayList
          currentTime
          class="listBox"
          v-if="isShowPlayList"
          @noShow="showPlayList"
        ></audioPlayList>
      </transition>

      <div class="schedule">
        <span
          >{{
            parseInt(currentTime / 60) > 9
              ? parseInt(currentTime / 60)
              : "0" + parseInt(currentTime / 60)
          }}:{{
            parseInt(currentTime % 60) > 9
              ? parseInt(currentTime % 60)
              : "0" + parseInt(currentTime % 60)
          }}</span
        >
        <el-slider
          v-model="localCurrentTime"
          :show-tooltip="false"
          :max="duration"
          class="scheduleInner"
          @change="sendCurrentTime"
        ></el-slider>
      </div>

      <div class="boxFooter">
        <!-- <select>
          <option value="">顺序</option>
          <option value="">随机</option>
          <option value="">单曲循环</option>
        </select> -->
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="top"
          class="selBox"
        >
          <template #reference>
            <van-button type="primary" class="selShow">{{
              succession
            }}</van-button>
          </template>
        </van-popover>

        <div class="togglePlay">
          <div class="up" @click="upOne">
            <img src="../assets/image/left.png" class="upImg" />
          </div>
          <div class="play" @click="audioPlay">
            <van-icon
              name="play-circle"
              size="35px"
              :class="{ isPlay: isPlay }"
            />
            <van-icon
              name="pause-circle"
              size="35px"
              :class="{ isPlay: !isPlay }"
            />
          </div>
          <div class="down" @click="downOne">
            <img src="../assets/image/right.png" class="downImg" />
          </div>
        </div>

        <div class="lists">
          <div class="volumeicon">
            <van-icon name="volume" size="20px" @click="showVolume" />
          </div>
          <div class="listico">
            <van-icon name="wap-nav" size="20px" @click="showPlayList" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import audioPlayList from "./audioPlayList";
// import { Toast } from 'vant';
export default {
  name: "fullScreen",
  data() {
    return {
      // 歌词
      lyricList: [],
      // 是否显示歌曲列表
      isShowPlayList: false,
      // 是否显示顺序播放
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "顺序" }, { text: "随机" }, { text: "单曲循环" }],
      locaVolume: "",
      isShowVolume: false,
      localCurrentTime: 0,
    };
  },
  computed: {
    // 播放顺序
    succession: {
      get() {
        return this.$store.state.succession;
      },
      set() {},
    },
    // 播放状态
    isPlay: {
      get() {
        return this.$store.state.isPlay;
      },
      set() {},
    },
    // 歌词列表
    playList: {
      get() {
        return this.$store.state.playMusicList;
      },
      set() {},
    },
    // 当前播放歌曲
    playMusic: {
      get() {
        return this.$store.state.currentMusic;
      },
      set() {},
    },
    // 列表第一首歌曲
    oneSong: {
      get() {
        return this.$store.getters.oneSong;
      },
      set() {},
    },
    // 播放顺序
    succession: {
      get() {
        return this.$store.state.succession;
      },
      set() {},
    },
    // 歌曲当前播放时间
    currentTime: {
      get() {
        return this.$store.state.currentTime;
      },
      set() {},
    },
    // 音量
    volume: {
      get() {
        return this.$store.state.volume;
      },
      set() {},
    },
    // 时长
    duration: {
      get() {
        return this.$store.state.duration;
      },
      set() {},
    },
  },
  components: {
    audioPlayList,
  },
  methods: {
    sendCurrentTime() {
      this.$store.commit("GETCURRENTIME", this.localCurrentTime);
      this.$store.commit("GETCHANGECURRENTIME", this.localCurrentTime);
    },
    showVolume() {
      this.isShowVolume = !this.isShowVolume;
      setTimeout(() => {
        this.isShowVolume = !this.isShowVolume;
      }, 5000);
    },
    changeVolume() {
      // this.$store.commit("GETVOLUME", this.volume);
      // this.locaVolume=this.volume
      // console.log(this.locaVolume);
      // this.volume=this.locaVolume
      // this.$store.commit("GETVOLUME", this.volume);
      this.$store.commit("GETVOLUME", this.locaVolume);
    },
    showPlay() {
      this.$emit("showPlay");
    },
    getLyricData() {
      this.$axios
        .get("/lyric?id=" + this.playMusic.id)
        .then((res) => {
          let lyric = res.data.lrc.lyric;
          //把数组里的数据通过/n符分隔开
          let str = lyric.split("\n");
          //删除数组最后的空格符
          str.pop();
          //用正则匹配严谨
          let reg = /\[(\d+):(\d+\.\d+)]([\s\S.]*)/;
          //用map遍历过滤
          let lyricArray = str.map((item) => {
            //判断匹配
            if (reg.test(item)) {
              //分钟数据
              let min = Number(RegExp.$1);
              //秒
              let s = parseFloat(RegExp.$2);
              //歌词
              let lyric = RegExp.$3;
              // console.log(lyric);
              return {
                time: min * 60 + s,
                lyric: lyric,
              };
            }
          });
          let pree = lyricArray.map((item) => {
            return item.time;
          });
          for (let i = 0; i < lyricArray.length; i++) {
            if (i === lyricArray.length - 1) {
              lyricArray[i].pre = 0;
            } else {
              lyricArray[i].pre = pree[i + 1];
            }
          }
          this.lyricList = lyricArray;
          // console.log(this.lyricList);
        })
        .catch((error) => {
          if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            console.log(
              "音乐播放组件 fullScreen 获取歌词错误，请求发送成功，但返回状态码异常"
            );
            console.log("返回体数据==>", error.response.data);
            console.log("返回状态代码==>", error.response.status);
            console.log("返回头==>", error.response.headers);
          } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            // 而在node.js中是 http.ClientRequest 的实例
            console.log("音乐播放组件 fullScreen 获取歌词错误，请求发送失败");
            console.log("此次发送的请求==>", error.request);
          } else {
            // 发送请求时出了点问题
            console.log("音乐播放组件 fullScreen 获取歌词错误");
            console.log("问题错误==>", error.message);
          }
          console.log("error.config==>", error.config);
        });
    },
    upOne() {
      if (this.succession == "顺序") {
        this.$store.commit("UPONE");
      } else if (this.succession == "随机") {
        this.$store.commit("SUINEXTONE");
      } else {
        this.$store.commit("DANNEXTONE");
      }
    },
    downOne() {
      if (this.succession == "顺序") {
        this.$store.commit("NEXTONE");
      } else if (this.succession == "随机") {
        this.$store.commit("SUINEXTONE");
      } else {
        this.$store.commit("DANNEXTONE");
      }
    },
    audioPlay() {
      this.$store.commit("UPDATAISPLAY");
    },
    showPlayList() {
      this.isShowPlayList = !this.isShowPlayList;
    },
    // 播放列表一变化，播放的歌曲永远是列表第一首
    playOneSong() {
      // this.playMusic = this.oneSong;
      this.$store.commit("UPDATAONESONG");
    },
    onSelect(action) {
      // Toast(action.text);
      //把播放顺序传到vuex里
      this.$store.commit("UPDATASUCCESSION", action.text);
    },
  },
  created() {
    // console.log("fullScreen", this.playList);
    // console.log(this.playMusic);
    // console.log(this.playList);
    this.getLyricData();
    this.locaVolume = this.volume;
    // console.log(this.duration)
    // this.autoplay();
    // console.log(this.oneSong);
    // setTimeout(() => {
    //   console.log(this.lyricList);
    // }, 100);
    // this.$nextTick(()=>{
    //   this.getLyricData();
    //   this.locaVolume=this.volume
    // })
  },
  watch: {
    playMusic: {
      handler() {
        this.getLyricData();
      },
    },
    playList: {
      handler() {
        this.playOneSong();
      },
    },
    currentTime: {
      handler(nv) {
        let li = document.querySelector("li.active");
        if (li) {
          if (li.offsetTop > 260) {
            this.$refs.lyricLsit.scrollTop = li.offsetTop - 300;
          }
          this.localCurrentTime = nv;
        }
      },
    },
    volume: {
      handler(nv) {
        this.locaVolume = nv;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.fullScreenBox {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-position: 40% 30%;
  z-index: 20;
  color: #fff;
  .volume {
    height: 40vh;
    position: absolute;
    top: 20vh;
    right: 5vw;
    z-index: 22;
  }
  .Inner {
    backdrop-filter: blur(30px);
    height: 100vh;

    .fullScreenHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      border-bottom: 1px solid #b4b3b3;

      .x {
        margin-left: 2%;
      }

      .songName {
        word-wrap: break-word;
        word-break: normal;
        font-size: 16px;
        width: 80vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .forward {
        margin-right: 2%;
      }
    }

    .boxBody {
      display: flex;
      justify-content: center;
      position: relative;
      color: #b7b6b5;
      .bodyInner {
        width: 100vw;
        height: 80vh;
        // border: 1px solid;
        padding: 10px;
        overflow: auto;
        text-align: center;
        // border-bottom: 1px solid #b4b3b3;
        li {
          text-align: center;
          width: 80%;
          margin: 1.5vh auto;
        }
      }
    }

    .listBox {
      position: absolute;
      z-index: 21;
      bottom: 0;
      // border-bottom: 1px solid #b4b3b3;
    }
    .schedule {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-around;
      z-index: 18;
      span {
        display: inline-block;
        line-height: 38px;
      }
      .scheduleInner {
        width: 83%;
      }
    }

    .boxFooter {
      // height: 5vh;
      margin: 4vh 0 5vh 0;
      // line-height: 4vh;
      // padding: 2vh 0 0;
      display: flex;
      justify-content: space-around;
      align-items: center;

      // border-top: 1px solid #b4b3b3;
      // padding: 3vh 0 ;
      // box-sizing: border-box;
      // select {
      //   width: 50px;
      //   border: none;
      //   background: rgba($color: #000000, $alpha: 0);
      // }
      .selBox {
        // background: #b9b9b9;
        .selShow {
          background: none;
          border: none;
          padding: 0;
          width: 60px;
          height: 24px;
        }
      }

      .togglePlay {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;

        .up {
          margin: 0 5vw;

          .upImg {
            width: 25px;
          }
        }

        .down {
          margin: 0 5vw;

          .downImg {
            width: 25px;
          }
        }
      }
      .lists {
        width: 60px;
        display: flex;
        justify-content: space-around;
      }
    }
  }
}

.updown-enter,
.updown-leave-to {
  transform: translateY(100%);
}

.updown-enter-active,
.updown-leave-active {
  transition: all 0.1s linear;
}

.updown-enter-to,
.updown-leave {
  transform: translateY(0);
}

.isPlay {
  display: none;
}

.active {
  color: #fff;
  transform: scale(1.2);
}
</style>